﻿<style>
  .allow-overflow .el-tabs__content{
    overflow: visible;
  }
  .allow-overflow .el-tabs__header {
    margin: 0;
  }
</style>
<template>

  <div v-loading="isLoading">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/model/list' }">模型列表</el-breadcrumb-item>
      <el-breadcrumb-item v-if="modelInfo">{{modelInfo.name}}</el-breadcrumb-item>
    </el-breadcrumb>
<!--    <el-menu :default-active="index" class="el-menu-demo" mode="horizontal" router>-->
<!--      <el-menu-item index="record-module" :route="{path:'record-module',query:{parent:$route.query.parent}}">录入模块</el-menu-item>-->
<!--      <el-menu-item index="compute-module" :route="{path:'compute-module',query:{parent:$route.query.parent}}">计算模块</el-menu-item>-->
<!--      <el-menu-item index="key-item-module" :route="{path:'key-item-module',query:{parent:$route.query.parent}}">关键指标</el-menu-item>-->
<!--      <el-menu-item index="export-module" :route="{path:'export-module',query:{parent:$route.query.parent}}">导出模块</el-menu-item>-->
<!--      <el-menu-item index="risk-analysis-module" :route="{path:'risk-analysis-module',query:{parent:$route.query.parent}}">风险分析</el-menu-item>-->
<!--      <el-menu-item index="oil-price-module" :route="{path:'oil-price-module',query:{parent:$route.query.parent}}">多油价</el-menu-item>-->
<!--      <el-menu-item index="exists-compare" :route="{path:'exists-compare',query:{parent:$route.query.parent}}">有无对比</el-menu-item>-->
<!--    </el-menu>-->
<!--    <router-view v-if="modelInfo" :model-info="modelInfo" :page-height="pageHeight"></router-view>-->
    <el-tabs class="allow-overflow" v-if="modelInfo" v-model="index">
      <el-tab-pane label="录入模块" name="record-module"  :style="'height:'+contentHeight+'px;overflow-y:auto;'">
        <RecordModule :model-info="modelInfo" :page-height="contentHeight"></RecordModule>
      </el-tab-pane>
      <el-tab-pane label="计算模块" name="compute-module" lazy :style="'height:'+contentHeight+'px;overflow-y:visible;'">
        <ComputeModule :model-info="modelInfo" :page-height="contentHeight"></ComputeModule>
      </el-tab-pane>
      <el-tab-pane label="关键指标" name="key-item-module" lazy :style="'height:'+contentHeight+'px;overflow-y:auto;'">
        <KeyItemModule :model-info="modelInfo" :page-height="contentHeight"></KeyItemModule>
      </el-tab-pane>
      <el-tab-pane label="导出模块" name="export-module" lazy :style="'height:'+contentHeight+'px;overflow:visible;'">
        <ExportModule :model-info="modelInfo" :page-height="contentHeight"></ExportModule>
      </el-tab-pane>
      <el-tab-pane label="风险分析" name="risk-analysis-module" lazy :style="'height:'+contentHeight+'px;overflow:visible;'">
        <RiskAnalysisModule :model-info="modelInfo" :page-height="contentHeight"></RiskAnalysisModule>
      </el-tab-pane>
      <el-tab-pane label="多油价" name="oil-price-module" lazy :style="'height:'+contentHeight+'px;overflow-y:visible;'">
        <OilPriceModule :model-info="modelInfo" :page-height="contentHeight"></OilPriceModule>
      </el-tab-pane>
      <el-tab-pane label="有无对比" name="exists-compare" lazy :style="'height:'+contentHeight+'px;overflow-y:auto;'">
        <ExistsCompareModule :model-info="modelInfo" :page-height="contentHeight"></ExistsCompareModule>
      </el-tab-pane>
    </el-tabs>

  </div>


</template>

<script>
    import RecordModule from "./RecordModule.vue";
    import ComputeModule from "./ComputeModule.vue";
    import KeyItemModule from "./KeyItemModule.vue";
    import ExportModule from "./ExportModule.vue";
    import RiskAnalysisModule from "./RiskAnalysisModule.vue";
    import OilPriceModule from "./OilPriceModule.vue";
    import ExistsCompareModule from "./ExistsCompareModule.vue";

    export default {
      name: "ModelInfo",
      components: {
        ExistsCompareModule,
        OilPriceModule, RiskAnalysisModule, ExportModule, KeyItemModule, ComputeModule, RecordModule},
      $$route: {
        name: 'ModelInfo',
        // path: '/model/info/:id',
        // redirect: '/model/info/:id/record-module',
        meta: {
          title: '模型信息'
        }
      },
      props: {
        pageHeight: {},
      },
      data() {
        return {
          isLoading: true,
          contentHeight:500,
          formLabelWidth: '120px',
          modelInfo: null,
          index: 'record-module',
        }
      },
      watch:{
        $route(to,from) {
          // this.$emit('add-bread', { name: this.modelInfo.name })
        },
        pageHeight(val) {
          if(this.pageHeight) {
            this.contentHeight = this.pageHeight - 45;
          }
        }
      },
      created: function () {
        if(this.pageHeight) {
          this.contentHeight = this.pageHeight - 45;
        }
        let modelId = this.$route.query.id;
        this.loadModelInfo(modelId);
      },
        methods: {

            loadModelInfo: function (modelId) {
                this.$get("/model/" + modelId,{},(response) => {
                    this.modelInfo = response.data;
                  this.$emit('add-bread', { name: this.modelInfo.name })
                },()=>{
                  this.isLoading = false;
                });
            },

        },

    }
</script>
